import {useEffect, useState} from "react";
import {Button, Form, Input, Modal, Row, message} from "antd";
import {ApiFindInfo} from "@/api";
import useCard from "@/hooks/useCard";
import useBoolean from "@/hooks/useBoolean";
import FormList from "@/components/common/form/formList";
import DndTable from "@/components/common/table/dndTable";
import {InputFormItem} from "@/components/common/form/formItem";
import {columnsIndex, columnsRelevanceId, columnsSetting, columnsTitle, columnsPkId} from "@/components/Columns";

const TYPE = 5;

export default function SLCagetory() {
    const [form] = Form.useForm();
    const [visibly, on, off] = useBoolean(false);
    const [onDel, onCreateOrEdit] = useCard({});
    const [row, setRow] = useState<any>("");
    const [data, setData] = useState([]);

    const columns = [
        columnsIndex,
        columnsTitle,
        columnsPkId,
        columnsRelevanceId,
        {
            title: "描述",
            dataIndex: "spare1",
            key: "spare1",
        },
        {
            ...columnsSetting,
            render: (_: any, row: any) => (
                <div>
                    <Button type="primary" size="small" onClick={() => handleEdit(row)}>
                        编辑
                    </Button>

                    <Button danger style={{marginLeft: 20}} onClick={() => handleDel(row)} size="small">
                        删除
                    </Button>
                </div>
            ),
        },
    ];

    const handleDel = (row: any) => {
        onDel([{pkId: row.pkId}], reqFindList);
    };

    const handleEdit = (row: any) => {
        setRow(row);
        on();
    };
    useEffect(() => {
        if (row) {
            const {title, spare1, rid} = row;
            form.setFieldsValue({title, spare1, rid});
        }
    }, [row, form]);

    const handleOk = async () => {
        try {
            const val = await form.validateFields();
            let info = null;
            if (row) {
                info = [{...val, type: TYPE, pkId: row.pkId}];
            } else {
                info = val.tags.map((item: any) => ({...item, type: TYPE}));
            }

            const res: any = await onCreateOrEdit(info);
            if (res) {
                reqFindList(onCancel);
            }
        } catch (error) {
            console.log(error);
        }
    };
    const onCancel = () => {
        setRow("");
        off();
    };
    //查找列表
    const reqFindList = (callBack?: any) => {
        ApiFindInfo({type: TYPE})
            .then((res: any) => {
                setData(res.data);
                callBack && callBack();
            })
            .catch((err: any) => {
                message.error(err);
            });
    };

    useEffect(() => {
        reqFindList();
    }, []);

    return (
        <>
            <Row>
                <Button type="primary" onClick={on}>
                    添加二级分类
                </Button>
                &nbsp;&nbsp;
                <Button type="primary" onClick={() => onCreateOrEdit(data)}>
                    保存排序
                </Button>
            </Row>
            <DndTable style={{marginTop: 20}} setData={setData} data={data} columns={columns} />
            <Modal
                destroyOnClose
                width={row ? 700 : 900}
                title={`${row ? "编辑" : "添加"}二级分类`}
                open={visibly}
                onOk={handleOk}
                onCancel={onCancel}
            >
                <Form form={form} labelAlign="left" labelCol={{span: row ? 2 : 6}} preserve={false}>
                    {row ? (
                        <>
                            <InputFormItem name="title" label="标题" placeholder="请输入标题" />
                            <InputFormItem name="rid" label="物料Id" />
                            <InputFormItem name="spare1" label="描述" />
                        </>
                    ) : (
                        <>
                            <FormList
                                cusRequired
                                leftRequired
                                rightRequired
                                size={[6, 9]}
                                rightLabel="关联ID"
                                rightName="rid"
                                leftName="title"
                                leftLabel="标题"
                                cusLabel="描述"
                                cusName="spare1"
                            >
                                <Input placeholder="请输入描述" />
                            </FormList>
                        </>
                    )}
                </Form>
            </Modal>
        </>
    );
}
